<template>
  <div class="box">
    <div class="title_box">
        <input
          v-model="title"
          type="text"
          placeholder="请输入文章标题(不超过10个字符)"
          maxlength="20"
          @change="changeTitle"
        >
    </div>
    <div class="summary_box">
        <textarea
          v-model="summary"
          type="text"
          placeholder="请输入文章概要(不超过100个字符)"
          maxlength="100"
          @change="changeSummary"
        ></textarea>
    </div>
    <div class="main_box">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      >
      </quill-editor>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
import { addQuillTitle } from '../../../components/title.js'
import { mapState } from 'vuex'
import { initArticle } from 'com/shuju'
import ImageResize from 'quill-image-resize-module'
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei',
  'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)
Quill.register('modules/imageResize', ImageResize)
export default {
  name: 'WriteText',
  data () {
    return {
      title: '',
      summary: '',
      content: null,
      editorOption: {
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: [
            ['bold', 'italic', 'underline', 'strike', 'image'],
            ['formula', 'clean'],
            ['blockquote', 'code-block'],
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{'script': 'sub'}, {'script': 'super'}],
            [{'size': ['small', false, 'large', 'huge']}],
            [{ 'font': fonts }],
            [{'header': [1, 2, 3, 4, 5, 6, false]}],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            [{'direction': 'rtl'}]
          ]
        },
        placeholder: '输入内容........'
      }
    }
  },
  watch: {
    $router (to, from) {
      if (from.path === '/write') {
        this.title = ''
        this.summary = ''
        this.content = null
        this.$store.commit('changeWriteDisplay', false)
      }
    }
  },
  components: {
    quillEditor
  },
  computed: {
    ...mapState({
      imgs: 'images'
    })
  },
  methods: {
    changeTitle () {
      this.$store.commit('getArticalTitle', this.title)
    },
    changeSummary () {
      this.$store.commit('getArticalSummary', this.summary)
    },
    onEditorFocus (e) {
    },
    onEditorBlur (e) {
      this.$store.commit('getArticalContent', this.content)
    },
    onEditorChange (e) {
      this.$store.commit('getArticalContent', this.content)
    }
  },
  mounted () {
    addQuillTitle()
    if (this.$route.params.id) {
      initArticle(this.$route.params.id, this)
    }
    document.documentElement.style.backgroundColor = 'white'
  }
}
</script>

<style lang="stylus" scoped>
  .quill-editor {
    height: 2500px
    padding-bottom: 50px
  }
  .box{
    position: relative
    width: 1000px
    height: auto
    margin: 0 auto
    top: 80px
    .main_box{
      position: relative
      margin-top: 20px
      width: 1000px
      height: 500px
      .sendImg{
        opacity: 0
        z-index: 5
        width: 50px
        position: absolute
        right: 250px
        top: 10px
      }
      .sendImgs{
        display: none
        cursor: pointer
        position: absolute
        right: 270px
        font-size: .4rem
        top: 10px
      }
    }
    .title_box{
      width: 800px
      height: 70px
      input{
        width: 100%
        height: 100%
        border: none
        color: rgb(0,0,0)
        font-weight: 550
        font-size: .9rem
        padding: .1rem
      }
      input:focus{
        outline: none
      }
    }
    .summary_box{
      width: 800px
      height: 150px
      textarea{
        resize: none
        width: 100%
        height: 100%
        border: none
        color: rgb(150,150,150)
        font-weight: 550
        font-size: .6rem
        padding: .1rem
        outline: none
      }
      input:focus{
        outline: none
      }
    }
  }
</style>
